<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>权限管理 - ${siteName}</title>
<meta name="description" content="">
<meta name="author" content="xuzewei">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/cloud-admin.css">
<link rel="stylesheet" type="text/css" href="css/themes/default.css"
	id="skin-switcher">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<link rel="stylesheet" type="text/css"
	href="font-awesome/css/font-awesome.min.css">
<!-- JQUERY UI-->
<link rel="stylesheet" type="text/css"
	href="js/jquery-ui-1.10.3.custom/css/custom-theme/jquery-ui-1.10.3.custom.min.css" />
<!-- DATE RANGE PICKER -->
<link rel="stylesheet" type="text/css"
	href="js/bootstrap-daterangepicker/daterangepicker-bs3.css" />
<!-- JQGRID -->
<link rel="stylesheet" type="text/css"
	href="js/jqgrid/css/ui.jqgrid.min.css" />
<!-- HUBSPOT MESSENGER -->
<link rel="stylesheet" type="text/css"
	href="js/hubspot-messenger/css/messenger.min.css" />
<link rel="stylesheet" type="text/css"
	href="js/hubspot-messenger/css/messenger-theme-flat.min.css" />
<!-- SELECT2 -->
<link rel="stylesheet" type="text/css" href="js/select2/select2.min.css" />
<!-- UNIFORM -->
<link rel="stylesheet" type="text/css"
	href="js/uniform/css/uniform.default.min.css" />
</head>
<body id="app" ng-app="app" ng-controller="ctrl">
	<!-- HEADER -->
	<jsp:include page="include/header.jsp" />
	<!--/HEADER -->
	<!-- PAGE -->
	<section id="page">
		<!-- SIDEBAR -->
		<jsp:include page="include/sidebar.jsp" />
		<!-- /SIDEBAR -->
		<div id="main-content">
			<div class="container">
				<div class="row">
					<div id="content" class="col-lg-12">

						<!-- PAGE HEADER-->
						<div class="row">
							<div class="col-sm-12">
								<div class="page-header">
									<!-- BREADCRUMBS -->
									<ul class="breadcrumb">
										<li><i class="fa fa-home"></i> <a href="welcome.jsp">Home</a>
										</li>
									</ul>
									<!-- /BREADCRUMBS -->

									<div class="clearfix">
										<h3 class="content-title pull-left">权限管理</h3>
									</div>
									<div class="description"></div>
								</div>
							</div>
						</div>
						<div class="separator"></div>
						<div class="row">
							<div class="col-md-6">
								<!-- 角色名称 -->
								<div class="box border pink">
									<div class="box-title">
										<h4>
											<i class="fa fa-bars"></i>角色名称
										</h4>
										<div class="tools hidden-xs">
											<a href="javascript:;" class="reload"> <i
												class="fa fa-refresh"></i>
											</a> <a href="javascript:;" class="collapse"> <i
												class="fa fa-chevron-up"></i>
											</a>
										</div>
									</div>
									<div class="box-body">
										<form class="form-horizontal ">
											<div class="form-group">
												<label class="col-md-3 control-label" for="e2">角色名称</label>
											</div>
											<div class="form-group">
												<label class="col-md-1 control-label" for="e2"> </label>
												<div class="col-md-8">
													<div class="divide-2"></div>
													<select ng-model="roleName" multiple class="form-control"
														ng-options="o.name as o.name for o in roles"
														ng-change="getMember()">
													</select>
													<button class="btn btn-success" ng-click="gotoAddRole()">
														<i class="fa fa-plus"></i> 新增
													</button>
													<button class="btn btn-success" ng-click="gotoRemoveRole()">
														<i class="fa fa-minus"></i> 删除
													</button>
												</div>
											</div>
										</form>
									</div>
								</div>
								<!-- /BOX -->
							</div>
							<div class="col-md-6">
								<!-- BOX -->
								<div class="box border inverse">
									<div class="box-title">
										<h4>
											<i class="fa fa-bars"></i>成员
										</h4>
										<div class="tools hidden-xs">
											<a href="javascript:;" class="reload"> <i
												class="fa fa-refresh"></i>
											</a> <a href="javascript:;" class="collapse"> <i
												class="fa fa-chevron-up"></i>
											</a>

										</div>
									</div>
									<div class="box-body">

										<form class="form-horizontal ">
											<div class="form-group">
												<label class="col-md-3 control-label" for="e2">成员</label>
											</div>
											<div class="form-group">
													<label class="col-md-2 control-label" for="e2"></label>
													<div class="col-md-9">
														<label class="checkbox-inline" ng-repeat="x in userName"> <input
															type="checkbox" name="members" class="uniform"  value={{x.userId}}> {{x.account}}
														</label>
														<button class="btn btn-success" ng-click="gotoRemoveMember()">
														<i class="fa fa-minus"></i> 删除
													</button> 
													</div>
												</div>
											<div class="form-group">
												<label class="col-md-3 control-label" for="e2">选择成员</label>
											</div>
											<div class="form-group">
												<label class="col-md-1 control-label" for="e2"></label>
												<div class="col-md-10">
												
													<label class="checkbox-inline" ng-repeat="x in initUserName"> <input
															type="checkbox" name="userIds" class="uniform"  value={{x.userId}}> {{x.account}}
													</label>
													<button class="btn btn-success" ng-click="gotoAddMember()">
														<i class="fa fa-plus"></i> 新增
													</button>
												</div>
											</div>
										</form>
									</div>
								</div>
								<!-- /BOX -->
							</div>
							<!-- /PAGE HEADER -->

							<div class="separator"></div>
							<!-- ADVANCED -->
							<div class="row">
								<div class="col-md-12">
									<!-- BOX -->
									<div class="box border green">
										<div class="box-title">
											<h4>
												<i class="fa fa-bars"></i>权限
											</h4>
											<div class="tools hidden-xs">
												<a href="javascript:;" class="reload"> <i
													class="fa fa-refresh"></i>
												</a> <a href="javascript:;" class="collapse"> <i
													class="fa fa-chevron-up"></i>
												</a>
											</div>
										</div>
										<div class="box-body">
											<form class="form-horizontal ">
												<div class="form-group">
												<label class="col-md-3 control-label" for="e2">权限</label>
												<input type="checkbox"  ng-model="provinceAll" ng-click="allselect()">全选
											</div>
											<div class="form-group">
													<label class="col-md-2 control-label" for="e2"></label>
													<div class="col-md-9">
														<label class="checkbox-inline" ng-repeat="x in provinceName">
														 <input type="checkbox" name="provinceIds" class="uniform" ng-model="provinceIds" value={{x.id}}> {{x.name}}
														</label>
														<button class="btn btn-success" ng-click="removeRoleProvince()">
														<i class="fa fa-minus"></i> 删除
													</button> 
													</div>
												</div>
											<div class="form-group">
												<label class="col-md-3 control-label" for="e1">选择权限</label>
												<input type="checkbox"  ng-model="provinceAll1" ng-click="allselect1()">全选
											</div>
											<div class="form-group">
												<label class="col-md-1 control-label" for="e8"></label>
												<div class="col-md-10">
													<label class="checkbox-inline" ng-repeat="x in initProvinceName">
														 <input type="checkbox" name="provinceIds1" class="uniform" value={{x.id}}> {{x.name}}
													</label>
												<button class="btn btn-success" ng-click="addRoleProvince()">
														<i class="fa fa-plus"></i> 新增
													</button>
												</div>
											</div>
											</form>
										</div>
									</div>
									<!-- /BOX -->
									
								</div>
							</div>
							<div class="footer-tools">
								<span class="go-top"> <i class="fa fa-chevron-up"></i>
									Top
								</span>
							</div>
						</div>
						<!-- /CONTENT-->
					</div>
				</div>
			</div>
	</section>
	<!--/PAGE -->


	<!-- JAVASCRIPTS -->
	<!-- Placed at the end of the document so the pages load faster -->
	<!-- JQUERY -->
	<script src="js/jquery/jquery-2.0.3.min.js"></script>
	<!-- JQUERY UI-->
	<script
		src="js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
	<!-- BOOTSTRAP -->
	<script src="bootstrap-dist/js/bootstrap.min.js"></script>
	<!-- DATE RANGE PICKER -->
	<script src="js/bootstrap-daterangepicker/moment.min.js"></script>
	<script src="js/bootstrap-daterangepicker/daterangepicker.min.js"></script>
	<!-- SLIMSCROLL -->
	<script type="text/javascript"
		src="js/jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js"></script>
	<script type="text/javascript" src="js/typeahead/typeahead.min.js"></script>
	<!-- AUTOSIZE -->
	<script type="text/javascript" src="js/autosize/jquery.autosize.min.js"></script>
	<!-- COUNTABLE -->
	<script type="text/javascript"
		src="js/countable/jquery.simplyCountable.min.js"></script>
	<!-- SELECT2 -->
	<script type="text/javascript" src="js/select2/select2.min.js"></script>
	<!-- UNIFORM -->
	<script type="text/javascript" src="js/uniform/jquery.uniform.min.js"></script>
	<script type="text/javascript"
		src="js/jQuery-slimScroll-1.3.0/slimScrollHorizontal.min.js"></script>
	<!-- BLOCK UI -->
	<script type="text/javascript"
		src="js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
	<!-- JQGRID -->
	<script type="text/javascript" src="js/jqgrid/js/grid.locale-en.min.js"></script>
	<script type="text/javascript" src="js/jqgrid/js/jquery.jqGrid.min.js"></script>
	<!-- COOKIE -->
	<script type="text/javascript"
		src="js/jQuery-Cookie/jquery.cookie.min.js"></script>
	<!-- HUBSPOT MESSENGER -->
	<script type="text/javascript"
		src="js/hubspot-messenger/js/messenger.min.js"></script>
	<script type="text/javascript"
		src="js/hubspot-messenger/js/messenger-theme-flat.js"></script>
	<script type="text/javascript"
		src="js/hubspot-messenger/js/messenger-theme-future.js"></script>
	<script src="js/script.js"></script>
	<!-- ANGULAR-LIBRARY -->
	<script src="angular-1.5.0-rc.2/angular.js"></script>
	<!-- CUSTOM SCRIPT -->
	<script src="include/common.js"></script>
	<script>
		var app = angular.module("app", []);
		app.controller('ctrl',function($scope, $http, $httpParamSerializer,$injector, $window) {
			//全选操作
			 $scope.allselect=function(){
					var items = document.getElementsByName("provinceIds");
					for(var x=0;x<items.length;x++){
						items[x].checked = $scope.provinceAll;
					} 
			}
			 $scope.allselect1=function(){
					var items = document.getElementsByName("provinceIds1");
					for(var x=0;x<items.length;x++){
						items[x].checked = $scope.provinceAll1;
					} 
			}
			$scope.user = {
				"id" : "${param.id}"
			}
			//添加角色
			$scope.gotoAddRole = function() {
				var name = prompt("请输入角色名");
				if(name==null||name==""){
					alert("不能为空");
				}else if (window.confirm('你确定要添加此角色？')) {
					var reqDate = jQuery.param({
						"name" : name
					});
					var reqConfig = { headers : {"Content-Type" : "application/x-www-form-urlencoded; charset=UTF-8"}};
							$http.post("api/roleAction/add", reqDate,
								reqConfig).success(function(data, status) {
									$scope.reload();
									isErr(data) ? showErrMsg(data)
										: showMsg('添加成功！');
									}).error(function(data, status) {
									showNetworkErrMsg(data, status);
									});
								}
							}
							//删除角色
							$scope.gotoRemoveRole = function() {
								if ($scope.roleName == null
										|| $scope.roleName == ""
										|| $scope.roleName == "undefined") {
									alert("请选择一个角色");
								} else {
									if (window.confirm('你确定要删除此角色？')) {
										var reqDate = jQuery.param({
											"name" : $scope.roleName
										});
										var reqConfig = {headers : {"Content-Type" : "application/x-www-form-urlencoded; charset=UTF-8"	}};
											$http.post("api/roleAction/remove",reqDate, reqConfig)
												.success(
														function(data, status) {
															isErr(data) ? showErrMsg(data)
																	: showMsg('删除成功！');
															$scope.getMember();
														}).error(
														function(data, status) {
															showNetworkErrMsg(
																	data,
																	status);
														});
									}
								}
							}
							//获取roles							
							$scope.reload = function() {
								var reqConfig = {headers : {"Content-Type" : "application/x-www-form-urlencoded; charset=UTF-8"}};
								$http.post("api/roleAction/queryAll",reqConfig)
										.success(function(data, status) {
											if (isErr(data)) {
												showErrMsg(data);
												return;
											}
											$scope.roles = data.response;
										}).error(function(data, status) {
											showNetworkErrMsg(data, status);
										});
							};
							//获取成员和权限
							$scope.getMember = function() {
								var reqDate = jQuery.param({
									"name" : $scope.roleName
								});
								var reqConfig = {
									headers : {
										"Content-Type" : "application/x-www-form-urlencoded; charset=UTF-8"
									}
								};
								$http.post("api/roleAction/getMember", reqDate,
										reqConfig).success(
										function(data, status) {
											$scope.findUserName();
											$scope.getRoleProvince();
											$scope.findInitProvince();
											$scope.userName = data.response;
										}).error(function(data, status) {
									showNetworkErrMsg(data, status);
								});
							}

							//获取后台无角色用户全部名字
							$scope.findUserName = function() {
								var reqConfig = {
									headers : {
										"Content-Type" : "application/x-www-form-urlencoded; charset=UTF-8"
									}
								};
								$http.post("api/roleAction/initUserName", reqConfig)
										.success(function(data, status) {
											$scope.initUserName = data.response;
										}).error(function(data, status) {
											showNetworkErrMsg(data, status);
										});
							};
							//删除成员
							$scope.gotoRemoveMember=function(){
									var items=document.getElementsByName("members");
									var arr=new Array();
									var i=0; 
										for(var x=0;x<items.length;x++){
											if(items[x].checked){
												arr[i] = items[x].value;
												i++;
											}
										} 
										
									if(arr.length==0||arr.length<0){
										showMsg("至少选一个");
									}else if (window.confirm('删除后不可恢复，确定要删除吗？')) {
										var reqDate = jQuery.param({
											"members":arr 
										});
										var reqConfig = { headers: { "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"} };
										$http.post(
											"api/roleAction/gotoRemoveMember", reqDate, reqConfig
										).success(function(data, status) {
											isErr(data) ? showErrMsg(data) : showMsg('成员移除成功！');
											$scope.getMember();
											
										}).error(function(data, status) {
											showNetworkErrMsg(data, status);
										});
									}
								}
							//给角色添加成员
								$scope.gotoAddMember=function(){
									var items=document.getElementsByName("userIds");
									var arr=new Array();
									var i=0; 
										for(var x=0;x<items.length;x++){
											if(items[x].checked){
												arr[i] = items[x].value;
												i++;
											}
										} 
									if(arr.length==0||arr.length<0){
											showMsg("至少选一个");
									}else if (window.confirm('确定要给角色添加成员吗？')) {
										var reqDate = jQuery.param({
											"userIds":arr,
											"roleName":$scope.roleName
										});
										var reqConfig = { headers: { "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"} };
										$http.post(
											"api/roleAction/gotoAddMember", reqDate, reqConfig
										).success(function(data, status) {
											isErr(data) ? showErrMsg(data) : showMsg('添加成功！');
											$scope.getMember();
											//$window.location.href = "role_manage.jsp";
										}).error(function(data, status) {
											showNetworkErrMsg(data, status);
										});
									}
								}
								//获取角色权限
								$scope.getRoleProvince=function(){
									var reqDate = jQuery.param({
										"name" : $scope.roleName
									});
									var reqConfig = {
										headers : {
											"Content-Type" : "application/x-www-form-urlencoded; charset=UTF-8"
										}
									};
									$http.post("api/roleAction/getRoleProvince", reqDate,
											reqConfig).success(
											function(data, status) {
												$scope.provinceName = data.response;
											}).error(function(data, status) {
										showNetworkErrMsg(data, status);
									});
								}
								//查询该角色没有的权限
								$scope.findInitProvince = function() {
									var reqDate = jQuery.param({
										"name" : $scope.roleName
									});
									var reqConfig = {
										headers : {
											"Content-Type" : "application/x-www-form-urlencoded; charset=UTF-8"
										}
									};
									$http.post("api/roleAction/findInitProvince",reqDate,reqConfig)
											.success(function(data, status) {
												$scope.initProvinceName = data.response;
											}).error(function(data, status) {
												showNetworkErrMsg(data, status);
											});
								};
								
								//移除角色权限
									$scope.removeRoleProvince=function(){
										var items=document.getElementsByName("provinceIds");
										var arr=new Array();
										var i=0;
											for(var x=0;x<items.length;x++){
												if(items[x].checked){
													arr[i] = items[x].value;
													i++;
												}
											} 
										if(arr.length==0||arr.length<0){
											showMsg("至少选一个");
										}else if (window.confirm('删除后不可恢复，确定要删除吗？')) {
											var reqDate = jQuery.param({
												"provinceIds":arr,
												"roleName":$scope.roleName 
											});
											var reqConfig = { headers: { "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"} };
											$http.post(
												"api/roleAction/removeRoleProvince", reqDate, reqConfig
											).success(function(data, status) {
												isErr(data) ? showErrMsg(data) : showMsg('成员移除成功！');
												$scope.getMember();
											}).error(function(data, status) {
												showNetworkErrMsg(data, status);
											});
										}
									};
									
								//给角色添加权限
									$scope.addRoleProvince=function(){
										var items=document.getElementsByName("provinceIds1");
										var arr=new Array();
										var i=0;
											for(var x=0;x<items.length;x++){
												if(items[x].checked){
													arr[i] = items[x].value;
													i++;
												}
											} 
										if(arr.length==0||arr.length<0){
											showMsg("至少选一个");
										}else
										if (window.confirm('确定要给角色添加权限吗？')) {
											var reqDate = jQuery.param({
												"provinceIds":arr,
												"roleName":$scope.roleName
											});
											var reqConfig = { headers: { "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"} };
											$http.post(
												"api/roleAction/addRoleProvince", reqDate, reqConfig
											).success(function(data, status) {
												isErr(data) ? showErrMsg(data) : showMsg('添加成功！');
												$scope.getMember();
												console.log(123);
											}).error(function(data, status) {
												showNetworkErrMsg(data, status);
											});
										}
									}

							$scope.logout = function() {
								logout($window);
							};
						});
	</script>
	<script>
		jQuery(document).ready(function() {
			App.setPage("forms");
			App.init();
			jQuery('#nav_admin_user').click();
			setTimeout(function() {
				angular.element('#app').scope().reload();
			}, 500);
		});
	</script>
	<!-- /JAVASCRIPTS -->
</body>
</html>